#v-bind

此指令主要用在屬性綁定，常透過綁定一個變量的屬性來滿足動態的效果，變化形式很多種，例如:動態的class、style、href，父元件往子元件綁定屬性、綁定計算屬性等等...

語法: v-bind:屬性名="變量名"
縮寫: :屬性名="變量名"

<a v-bind:href="websiteURL">官方網站</a>
// code...
data (){
    return {
        websiteURL: 'https://ithelp.ithome.com.tw/'
    }
},

##以class為例，我們來操控變量名，你可以直接綁定寫成物件格式

<template>
    <div class="base" v-bind:class="{ success: isSuccess, danger: isError }">
        {{ msg }}
    </div>
</template>
<script>
export default {
    data (){
        return {
            msg: 'HelloWorld',
            isSuccess: true,
            isError: false
        }
    }
    //code...
}
</script>

最終渲染成<div class="base success">HelloWorld</div>

##也可以綁定物件變數

//code...
<div class="base" v-bind:class="msgClass">
    {{ msg }}
</div>
//code...
data (){
    return {
        msg: 'HelloWorld',
        msgClass: {
            success: false,
            danger: true
        }
    }
}
//code...

最終渲染成<div class="base danger">HelloWorld</div>

##甚至於寫成計算屬性返回一個物件

//code...
<div class="base" v-bind:class="msgClass">
    {{ msg }}
</div>
//code...
data (){
    return {
        msg: 'HelloWorld',
        apiCall: true,
        error: null
    }
},
computed: {
    msgClass () {
        return {
          success: this.apiCall && !this.error,
          danger: this.error && this.error.code > 200 
        }
    }
}
//code...

最終渲染成<div class="base success">HelloWorld</div>

##也可以綁定一個陣列格式

<div v-bind:class="[successClass, errorClass]"></div>
//code..
data () {
    return {
        successClass: 'success',
        errorClass: 'danger'
    }
}
//code...

最終渲染成<div class="success danger"></div>

##在陣列裡面放三元運算式

<div v-bind:class="[isSuccess ? success : danger, base]"></div>

##甚至於你可以在陣列語法理面使用物件語法

<div v-bind:class="[{ success: isSuccess }, base]"></div>

同理可以用在style，就不再多做描述。

上面教的是操控變量名，我們也可以改變屬性名，來達到動態屬性

<a v-bind:[attributeName]="url"> ... </a>
//coed..
data () {
    return {
        attributeName: 'href'
    }
}

同理可以用在 v-on 指令上

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang